import * as React from "react";
import {
    Box,
    Button,
    Paper,
    Stack,
    Table,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    TextField
} from "@mui/material";
import {useAllSettings} from "../hooks/useAllSettings.ts";
import {useState} from "react";
import {useSettings} from "../hooks/useSettings.ts";
import {useCheckAttendanceRules} from "../hooks/useCheckAttendanceRules.ts";

interface Data {
    id: string;
    name: string;
    morning_start_time: string;
    evening_end_time: string;
}

const Settings: React.FC = () => {
    const {checkAttendanceRules, data, error1} = useCheckAttendanceRules();
    const [attendanceData, setAttendanceData] = React.useState<Data[]>([]);

    React.useEffect(() => {
        const fetchAttendance = async () => {
            await checkAttendanceRules();
            if (error1) {
                console.log(error1);
                return;
            }
            if (data) {
                const dataArray: Data[] = JSON.parse(data);
                setAttendanceData(dataArray);
            }
        };
        fetchAttendance();
    }, [data]);

    const {allSettings, isAllLoading, allError} = useAllSettings();
    const [allMorningStartTime, setAllMorningStartTime] = useState('');
    const [allMorningEndTime, setAllMorningEndTime] = useState('');
    const [allStatusText, setAllStausText] = useState('设置全部规则');

    const {settings, isLoading, error} = useSettings();
    const [id, setId] = useState('');
    const [morningStartTime, setMorningStartTime] = useState('');
    const [morningEndTime, setMorningEndTime] = useState('');
    const [statusText, setStausText] = useState('设置个人规则');

    const handleAllSettings = async () => {
        await allSettings(allMorningStartTime, allMorningEndTime);
        if (allError) {
            setAllStausText(allError);
            setTimeout(() => {
                setAllStausText('设置全部规则');
            }, 3000);
            return;
        }
        setAllStausText('设置成功');
        setTimeout(() => {
            setAllStausText('设置全部规则');
        }, 3000);
    };

    const handleSettings = async () => {
        await settings(id, morningStartTime, morningEndTime);
        if (error) {
            setStausText(error);
            setTimeout(() => {
                setStausText('设置个人规则');
            }, 3000);
            return;
        }
        setStausText('设置成功');
        setTimeout(() => {
            setStausText('设置个人规则');
        }, 3000);
    }

    return (
        <Box>
            <Stack direction="row" spacing={3} sx={{marginTop: 1, marginBottom: 1, justifyContent: 'space-between'}}>
                {/*全部考勤规则设置*/}
                <Stack direction="row" spacing={3}>
                    <TextField label="上班考勤时间" variant="standard"
                               onChange={(e) => setAllMorningStartTime(e.target.value)}/>
                    <TextField label="下班考勤时间" variant="standard"
                               onChange={(e) => setAllMorningEndTime(e.target.value)}/>
                    <Button variant="contained" disabled={isAllLoading}
                            onClick={handleAllSettings} sx={{
                        backgroundColor: '#21C491',
                        '&:hover': {backgroundColor: '#1EB384'}
                    }}>{allStatusText}</Button>
                </Stack>

                {/*个人考勤规则设置*/}
                <Stack direction="row" spacing={3}>
                    <TextField label="工号" variant="standard"
                               onChange={(e) => setId(e.target.value)}/>
                    <TextField label="上班考勤时间" variant="standard"
                               onChange={(e) => setMorningStartTime(e.target.value)}/>
                    <TextField label="下班考勤时间" variant="standard"
                               onChange={(e) => setMorningEndTime(e.target.value)}/>
                    <Button variant="contained" disabled={isLoading}
                            onClick={handleSettings} sx={{
                        backgroundColor: '#21C491',
                        '&:hover': {backgroundColor: '#1EB384'}
                    }}>{statusText}</Button>
                </Stack>
            </Stack>

            <TableContainer component={Paper}>
                <Table sx={{minWidth: 350}}>
                    <TableHead>
                        {/*表头*/}
                        <TableRow>
                            <TableCell>工号</TableCell>
                            <TableCell>姓名</TableCell>
                            <TableCell>上班考勤规则</TableCell>
                            <TableCell>下班考勤规则</TableCell>
                        </TableRow>
                    </TableHead>

                    <tbody>
                    {attendanceData.map((row) => (
                        <TableRow key={row.id}>
                            {/*工号*/}
                            <TableCell>{row.id}</TableCell>
                            {/*姓名*/}
                            <TableCell>{row.name}</TableCell>
                            {/*上班考勤规则*/}
                            <TableCell>{row.morning_start_time}</TableCell>
                            {/*下班考勤规则*/}
                            <TableCell>{row.evening_end_time}</TableCell>
                        </TableRow>
                    ))}
                    </tbody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default Settings;
